<template>
	<view>
		<view class="find">
			<textarea style="border: 1px solid;margin: 1vw; padding: 2vw; width: 90vw;" @input="changeValue"
				maxlength="200"></textarea>
			<view class="findPicture">
				<view v-for="(picture,index) in pictures" :key="index" @longpress="delImage(index)">
					<image class="image" :src="picture" mode="aspectFit"></image>
				</view>
				<view class="image" v-if="pictures.length<9"  @click="addPicture" style="display: flex; 
				justify-content: center; align-items: center;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;">
					<u-icon name="plus" size="25px" color="#41A863"></u-icon>
				</view>
			</view>
			<view class="send" @click="send">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				pictures: [],
				count:9
			};
		},
		methods: {
			changeValue(e) {
				this.value = e.detail.value
				console.log(this.value)
			},
			//选择图片
			addPicture() {
				let that = this;
				uni.chooseImage({
					count:that.count,
					sourceType: ['album'], //从相册选择
					success(res) {
						console.log(res);
						that.count = that.count - res.tempFilePaths.length;
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							let filePath = res.tempFilePaths[i]
			
							uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: Math.floor(Math.random() * 900000000) + 100000000 + '.jpg',
								success(res) {
									that.pictures.push(res.fileID);
								}
							});
						}
					}
				});
			},
			delImage(index) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确认要删除此图片吗？',
						success: function(res) {
							if (res.confirm) {
								that.pictures.splice(index,1);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
			},
			send(){
				if(this.value==""&&this.pictures.length==0){
					uni.showToast({
						icon:'error',
						title:"内容为空"
					})
				} else {
					uni.request({
						url: getApp().url + 'findList/addFind',
						data: {
							userId:uni.getStorageSync("userId"),
							content:this.value,
							pictures:JSON.stringify(this.pictures)
						},
						header: {
							token: uni.getStorageSync("token")
						},
						method: "POST",
						success: (res) => {
							if (res.data.code == -1) {
								return uni.showToast({
									icon: "error",
									title: res.data.msg
								});
							};
							uni.showToast({
								icon: "success",
								title: "发表成功"
							});
							uni.navigateBack();
						},
						fail: (error) => {
							console.log(error);
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.find {
		padding: 5px 2vw;

		.findMessage {
			padding: 0 1vw;
			word-break: break-all;
		}

		.findPicture {
			display: flex;
			flex-wrap: wrap;

			.image {
				margin: 1vw;
				width: 30vw;
				height: 30vw;
			}

		}
	}

	.send {
		margin: 3vw;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 20px;
		background-color: #41A863;
	}
</style>